{extend name='common/common' /}

{block name='style'}
<style media="screen">
	.el-button.el-button--mini {
		padding:5px;
		margin-left:0;
		margin-right:5px;
	}
</style>
{/block}

{block name="content"}
<el-row>
	{if authCheck('socketmsg/groupchat')}
	<el-card class="box-card">
		<div slot="header">
			<span class="span-primary"><i class="fa fa-bell"></i></span>
			聊天室管理
			{if authCheck('socketmsg/addchat') }
			<el-button class="header-btn" type="primary" size="small"
				icon="el-icon-plus" plain @click="addRow"> 新建聊天室</el-button>
			{/if}
		</div>
		<div class="el-card-ct">
			<el-table :data="groupChatListData.tableData" stripe="true">
				<el-table-column align="center" prop="id" width="80" label="聊天室ID"></el-table-column>
				<el-table-column align="center" prop="msg_name" label="群聊名称"></el-table-column>
				<el-table-column align="left" label="成员">
					<template slot-scope="scope">
						<el-tooltip effect="dark" open-delay="500" hide-after="1500"
							content="添加成员" placement="bottom">
							<el-button
								@click="addMember(scope.row)"
								size="mini" plain type="primary"
								icon="el-icon-plus">
							</el-button>
						</el-tooltip>
						<el-tooltip effect="dark" open-delay="500" hide-after="1500"
							content="移除该成员" placement="bottom" v-for="u in scope.row.users">
							<el-button @click="delMember(u.id,scope.row)" type="danger" plain
								size="mini">
								{{u.real_name}}
							</el-button>
						</el-tooltip>
					</template>
				</el-table-column>
				<el-table-column align="center" label="操作">
					<template slot-scope="scope">
						{if authCheck('socketmsg/editchat')}
						<el-tooltip effect="dark" open-delay="500" hide-after="1500"
							content="编辑聊天室" placement="bottom">
							<el-button
								@click="editRow(scope.row)" circle
								size="small" plain type="success"
								icon="el-icon-edit">
							</el-button>
						</el-tooltip>
						{/if}
						<el-tooltip effect="dark" open-delay="500" hide-after="1500"
							content="清除聊天记录" placement="bottom">
							<el-button
								@click="clearRow(scope.row)" circle
								size="small" plain 	type="warning"
								icon="fa fa-recycle">
							</el-button>
						</el-tooltip>
						{if authCheck('socketmsg/delchat')}
						<el-tooltip effect="dark" open-delay="500" hide-after="1500"
							content="删除聊天室" placement="bottom">
							<el-button
								@click="delRow(scope.row)" circle
								size="small" plain 	type="danger"
								icon="el-icon-delete">
							</el-button>
						</el-tooltip>
						{/if}
					</template>
				</el-table-column>
			</el-table>
			<div class="table-page">
				<el-pagination
					@size-change="GroupChatPageSize"
					@current-change="GroupChatCurPage"
					:current-page="groupChatListData.pageNumber"
					:page-sizes="[10, 20, 50, 75]"
					:page-size="groupChatListData.pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="groupChatListData.tableTotal">
				</el-pagination>
			</div>
		</div>
	</el-card>
	{/if}
</el-row>
<el-row :gutter="15">
	{if authCheck('socketmsg/syspush')}
	<el-col :md="8">
		<el-card class="box-card">
			<div slot="header">
				<span class="span-primary"><i class="el-icon-info"></i></span>
				系统消息推送
				<el-button class="header-btn" type="danger" size="small"
					icon="fa fa-recycle" plain @click="clearPush"> 清除推送记录</el-button>
			</div>
			<div class="el-card-ct">
				<el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="sysPushMsg"></el-input>
				<p align="right">
					<el-button @click="sysPush" type="primary" plain>发送</el-button>
				</p>
			</div>
		</el-card>
	</el-col>
	{/if}
</el-row>
{/block}

{block name="script"}
<script type="text/javascript">
var main = new Vue({
	el:"#main",
	data:{
		loading:false,
		sysPushMsg:"",
		groupChatListData:{
			tableData:'',
			pageSize:10,
			pageNumber:1,
			tableTotal:0
		}
	},
	mounted:function() {
		this.getGroupChat();
	},
	methods:{
		getGroupChat() {
			this.loading=true;
			var param = {
				pageSize:this.groupChatListData.pageSize,
				pageNumber:this.groupChatListData.pageNumber,
			}
			$.post('{:url("Socketmsg/groupChat")}',param,function(res){
				main.loading=false;
				if(res.code == 1){
					main.$message({message: res.msg,type:'success'});
					main.groupChatListData.tableData = res.data.rows;
					main.groupChatListData.tableTotal = res.data.total;
				}else{
					main.$notify.error({title: '失败',message: res.msg,});
				}
			})
		},
		ajaxRes(res) {
			if(res.code == 1){
				this.$notify({title:"成功",type:"success",message:res.msg});
			}else{
				this.$notify.error({title:"错误",message:res.msg});
			}
			this.getGroupChat();
		},
		GroupChatPageSize(val) {
			this.groupChatListData.pageSize = val;
			this.getGroupChat();
		},
		GroupChatCurPage(val) {
			this.groupChatListData.pageNumber = val;
			this.getGroupChat();
		},
		addRow() {
			OptChatRoomBox.title = '新建聊天室';
			OptChatRoomBox.optype = "add";
			OptChatRoomBox.is_show = true;
			OptChatRoomBox.form.msg_name = "";
		},
		editRow(row) {
			OptChatRoomBox.title = '编辑聊天室';
			OptChatRoomBox.optype = row.id;
			OptChatRoomBox.is_show = true;
			OptChatRoomBox.form.msg_name = row.msg_name;
		},
		delRow(row) {
			this.$confirm('此操作会将删除该聊天室, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				var param = {
					id:row.id
				}
				$.post('{:url("Socketmsg/delChat")}',param,function(res) {
					main.ajaxRes(res);
				});
			}).catch(() => {});
		},
		clearRow(row) {
			this.$confirm('此操作会将清除该聊天室的聊天记录, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				$.post('{:url("Socketmsg/clearRecord")}',{id:row.id},function(res) {
					main.ajaxRes(res);
				});
			}).catch(() => {});
		},
		clearPush() {
			this.$confirm('此操作会将清除所有的推送消息记录, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				$.post('{:url("Socketmsg/clearRecord")}',{msg_type:1},function(res) {
					main.ajaxRes(res);
				});
			}).catch(() => {});
		},
		addMember(row) {
			userList.getTable();
			userList.user_ids = "";
			userList.msg_id = row.id;
			userList.is_show = true;
		},
		delMember(id,row) {
			this.$confirm('此操作会将该用户踢出聊天室, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				if(id == row.create_uid){
					this.$notify.error({title:"错误",message:"不能踢出群主"});
					return false;
				}
				var param = {
					msg_id:row.id,
					user_id:id
				}
				$.post('{:url("Socketmsg/delMember")}',param,function(res) {
					main.ajaxRes(res);
				})
			}).catch(() => {});
		},
		sysPush() {
			if(this.sysPushMsg == ''){
				this.$notify.error({title:"错误",message:"推送内容不能为空"});
				return false;
			}
			if(this.sysPushMsg.length > 255){
				this.$notify.error({title:"错误",message:"推送内容过长，请尝试分段发送"});
				return false;
			}
			var param = {
				msg:this.sysPushMsg
			}
			const h = this.$createElement;
			this.$msgbox({
				title:"提示",
				type: 'warning',
				message: h('div', null, [
					h('div',{style:'word-wrap: break-word; word-break: normal;'},
					'推送内容为：'+this.sysPushMsg+', 是否继续?')
		        ]),
				showCancelButton: true,
				confirmButtonText: '确定',
				cancelButtonText: '取消'
			}).then(() => {
				$.post('{:url("Socketmsg/sysPush")}',param,function(){
					main.sysPushMsg = "";
				});
			}).catch(() => {
				this.$message({type:'info',message:'已取消推送'});
			});
		}
	}
})
</script>
{/block}

{block name="component"}
<!-- start of 添加编辑聊天室 -->
<div id="OptChatRoomBox">
	<el-dialog :title="title" :visible.sync="is_show" top="5vh">
		<div class="el-dialog-ct">
			<el-form label-width="80px" :model="form" :rules="rules" ref="form" inline>
				<el-form-item prop="msg_name">
					<el-input v-model="form.msg_name" placeholder="聊天室名称" required clearable></el-input>
				</el-form-item><br>
			</el-form>
		</div>
		<div slot="footer" class="dialog-footer">
			<el-button @click="is_show = false">取消</el-button>
			<el-button type="success" @click="saveChatRoom">保存</el-button>
		</div>
	</el-dialog>
</div>
<script type="text/javascript">
var OptChatRoomBox = new Vue({
	el:"#OptChatRoomBox",
	data:{
		is_show:false,
		title:"新建聊天室",
		optype:"add",
		form:{
			msg_name:"",
		},
		rules:{
			msg_name:[{required:true,message:'请输入聊天室名称',trigger:['blur','change']}],
		}
	},
	methods:{
		saveChatRoom() {
			var param = this.form;
			if(this.optype == "add"){
				var url = "{:url('Socketmsg/addChat')}";
			}else{
				param.id = this.optype;
				var url = "{:url('Socketmsg/editChat')}";
			}
			$.post(url,param,function(res) {
				OptChatRoomBox.is_show = false;
				main.ajaxRes(res);
			});
		}
	}
})
</script>
<!-- end of 添加编辑聊天室 -->

<!-- start of user list -->
<div id="userList">
	<el-dialog title="选择用户" :visible.sync="is_show" top="5vh">
		<div class="el-dialog-ct">
			<el-form :inline="true" class="search-table-form">
				<el-form-item>
					<el-input
						placeholder="请输入搜索内容"
						clearable="true"
						prefix-icon="el-icon-search"
						v-model="list.searchText">
					</el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="info" plain @click="getTable">查询</el-button>
				</el-form-item>
			</el-form>
			<el-table :data="list.tableData" stripe="true" @selection-change="getIds">
				<el-table-column type="selection" width="50"></el-table-column>
				<el-table-column align="center" fixed prop="id" label="职员ID"></el-table-column>
				<el-table-column align="center" fixed prop="real_name" label="真实姓名"></el-table-column>
				<el-table-column align="center" prop="user_name" label="职员名称"></el-table-column>
			</el-table>
			<div class="table-page">
				<el-pagination
					@size-change="pageSizeChange"
					@current-change="curPageChange"
					:current-page="list.pageNumber"
					:page-sizes="[10, 20, 50, 75]"
					:page-size="list.pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="list.tableTotal">
				</el-pagination>
			</div>
		</div>
		<div slot="footer" class="dialog-footer">
			<el-button @click="is_show = false">取消</el-button>
			<el-button type="success" @click="sureUser">保存</el-button>
		</div>
	</el-dialog>
</div>
<script type="text/javascript">
var userList = new Vue({
	el:"#userList",
	data:{
		is_show:false,
		user_ids:"",
		msg_id:"",
		list:{
			tableData:'',
			searchText:'',
			pageSize:10,
			pageNumber:1,
			tableTotal:0
		}
	},
	methods:{
		getTable() {
			$.post('{:url("User/index")}',{
				pageSize:this.list.pageSize,
				pageNumber:this.list.pageNumber,
				searchText:this.list.searchText
			},function(res){
				if(res.code == 1){
					userList.list.tableData = res.data.rows;
					userList.list.tableTotal = res.data.total;
				}else{
					main.$notify.error({title:'失败',message:res.msg});
				}
			})
		},
		pageSizeChange(val) {
			this.list.pageSize = val;
			this.getTable();
		},
		curPageChange(val) {
			this.list.pageNumber = val;
			this.getTable();
		},
		getIds(val){
			this.user_ids = val;
		},
		sureUser() {
			var ids = [];
			for(var i=0;i<this.user_ids.length;i++){
				ids[i] = this.user_ids[i].id;
			}
			var param = {
				msg_id:this.msg_id,
				user_ids:ids
			}
			$.post("{:url('Socketmsg/addMember')}",param,function(res){
				userList.is_show = false;
				main.ajaxRes(res);
			})
		}
	}
})
</script>
<!-- end of user list -->
{/block}
